<template>
	<view class="orderlist" v-if="item">
		<u-navbar :autoBack="true" title="匹配详情" :titleStyle="titleStyle" bgColor="rgba(0,0,0,0)" leftIconColor="#fff" :fixed="true" @click-left="$back" ></u-navbar>
		
		<view class="top_nav"  >
			<view class="tp1">
				<view class="left">
					
				</view>
				
				<view v-if="item.status==0">
						距离派单结束还剩
				</view>
				
				<view v-if="item.status==1">
						恭喜您已抢单成功
				</view>
				<view v-if="item.status==2">
						抢单失败
				</view>
				
				<view class="right">
					
				</view>
				
			</view>
			<view class="con">
				<view class="cons">
					<wly-countdown v-if="item.status==0"  :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)" :second="getDateStr(item.sy_time,3)" showType="slot">
						<template v-slot="{day, hour, minute, second}">
							<view v-if="day||hour||minute||second">
								<view class="time_model">
									<view>
										{{day}}
									</view>
									<view>
										天
									</view>
								</view>
								<view class="time_model">
									<view>
										{{hour}}
									</view>
									<view>
										时
									</view>
								</view>
								<view class="time_model">
									<view>
										{{minute}}
									</view>
									<view>
										分
									</view>
								</view>
								<view class="time_model">
									<view>
										{{second}}
									</view>
									<view>
										秒
									</view>
								</view>
								
							</view>
						</template>
					</wly-countdown>
					<wly-countdown v-else  :hour="0" :minute="0" :second="0" showType="slot">
						<template v-slot="{day, hour, minute, second}">
							<view v-if="day||hour||minute||second">
								<view class="time_model">
									<view>
										{{day}}
									</view>
									<view>
										天
									</view>
								</view>
								<view class="time_model">
									<view>
										{{hour}}
									</view>
									<view>
										时
									</view>
								</view>
								<view class="time_model">
									<view>
										{{minute}}
									</view>
									<view>
										分
									</view>
								</view>
								<view class="time_model">
									<view>
										{{second}}
									</view>
									<view>
										秒
									</view>
								</view>
								
							</view>
						</template>
					</wly-countdown>
				</view>
				
				
			</view>
			
			<view class="bom">
				<text v-if="item.sy_time>0&item.status==0">
							定制需求 | 写手匹配 | 预计匹配于 {{item.end_time_str}}截止
				</text>
				<text v-if="item.sy_time<=0">
							定制需求 | 写手匹配 | 已截稿
				</text>
			</view>
			
			
		</view>
		
		<view class="cont">
			<view class="cont_s">
				<view class="con_top"  v-if="item.status==0">
					<view>
						<view>
								发布时间：
						</view>
						
						<view>
							{{item.apply_time}}
						</view>	
						
					</view>
					<view class="ends">
						<text v-if="item.status==0">待选择</text>
						<text v-if="item.status==1">匹配成功</text>
						<text v-if="item.status==2">已取消</text>
					</view>
				</view>
				
				<view class="con_top" v-if="item.status==1">
					匹配单号：{{item.order_sn}}
					<view class="ends">
						<text v-if="item.status==0">待选择</text>
						<text v-if="item.status==1">匹配成功</text>
						<text v-if="item.status==2">已取消</text>
						
					</view>
				</view>
				
				<view class="con_nav">
					<view class="navs">
						<view class="icon">订</view>
						<view class="navs_right">
							<view class="tp">
								字数共计{{item.tran_font_num}}{{item.tran_font_word}}，
								<text v-if="item.task_type==0">
									订单价格每{{item.tran_font_word}}{{item.tarn_price}}币
								</text>
								<text v-else>
									订单价格共计{{parseInt(item.money)}}币
								</text>
							</view>
							<view class="bom">截稿时间:{{item.end_time.substring(0,17)}}，类型{{item.c_desc}}</view>
						</view>
					</view>
					<view class="navs">
						<view class="icon xie">写</view>
						<view class="navs_right">
							<view class="tp">写手等级为:【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求:{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'用户要求作品保密'}}
							</view>
						</view>
					</view>
					<view class="con_bomt" >
						<span>制作要求：</span>
						{{item.c_content}}
					</view>
				
					
				</view>
				
				<view class="bomt">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right">
						{{item.money}}
						</view>
				</view>
				
				
				<view class="bomt1">
					<view class="bomt_a_left">我的申请</view>
				</view>
				<view class="man_list" >
					<view class="left">
						<image :src="userInfo.pic | formatImgUrl"  mode=""></image>
					</view>
					<view class="man_cont">
						<view class="man_top">
							<view class="nick">
								{{userInfo.username}}
							</view>
							<view class="jibox">
								<image 
									:src="$options.filters.formatImgUrl(userInfo.writer_level.is_active?userInfo.writer_level.level.image:userInfo.writer_level.level.hide_img)"
									@click="$go('/pages/user/grade?uid='+userInfo.membe_id)" class="jipic" mode=""
									v-if="userInfo&&userInfo.is_writer">
								</image>
								<image v-if="userInfo&&userInfo.user_level.is_active"
										
										:src="!userInfo.user_level.level?'':($options.filters.formatImgUrl(userInfo.user_level.active_day>0?userInfo.user_level.level.image:userInfo.user_level.level.hide_img))"
										class="biepic" mode="" >
										
									</image>
							</view>
						</view>
						<view class="man_bomt">
							{{item.create_time}}
						</view>
					</view>
						<image src="../static/image/pp.png" class="pipi_sucess"  v-if="item.status==1" mode="aspectFill"></image>
					<view class="cnbt">
						{{item.qiang_arr.u_title}}
					</view>
					<view class="bom_img">
						<image :src="items | formatImgUrl" v-for="(items,index) in item.qiang_arr.img"  @click="$common.previewImage(items,item.qiang_arr.img)" mode="aspectFill"></image>
					</view>
				</view>
			
				
			</view>
		</view>
		
		<view class="zhanwei"></view>
		<view class="tarb_new" v-if="item.is_qiang==0&&item.status==0">
			<view class="tar_home">
					<view @tap.stop="no_order(item)">不感兴趣</view>
			</view>
			<view class="tar_order" @click="show1=true">
				<view>
					<view  @tap.stop="apply_order(item)">申请抢单</view>
				</view>
			</view>
		</view>
		
		<view class="tarb_new" v-if="item.status==1">
			<view class="tar_home">
				<view>
					<view @tap.stop="goToreport(item)">客服申诉</view>
				</view>
			</view>
			<view class="tar_order" @tap.stop="to_im(item)">
				<view>
					进行沟通
				</view>
			</view>
		</view>
		
		
		<view class="tarb_new" v-if="item.is_qiang==1&&item.status==0">
			<view class="tar_home">
				<view>
					<view @tap.stop="tuichu_order(item)">退出抢单</view>
				</view>
			</view>
			<view class="tar_order" @click="show1=true">
				<view>
					查看申请
				</view>
			</view>
		</view>
		
		
		<view v-if="show1" class="zong">
			<view  class="biaoqian">
				<view class="top">
					<image :src="userInfo.pic | formatImgUrl" mode=""></image>
					<view>{{userInfo.username}}</view>
					<view>申请抢单</view>
				</view>
				
				<view class="tab">
					<textarea  placeholder-class="c1" v-model="form.cont" placeholder="可填写任意内容供付款方查看"></textarea>
				</view>
				
				<view class="not_like" v-if="(item.is_qiang==1&&form.img.length>0)||item.is_qiang==0">
					<view class="tp" v-if="item.is_qiang==0">如有例文展示，请上传（选填）</view>
				
					<view class="imgView">
						<!-- <view v-for="(img,index) in form.img"   class="imgList">
							<image :src="img | formatImgUrl" mode="aspectFill"  @click="$common.previewImage(img,form.img)" style="width: 105rpx;height: 105rpx;"></image>
							<view  v-if="item.is_qiang==0" class="imgClose" @click="deletePic(index)">×</view>
						</view>
						
						<image :src="'/images/up.png' | formatImgUrl" mode="widthFix" style="width: 110rpx;height: 110rpx;"
							@click="onChooseImg" v-if="item.is_qiang==0&&form.img&&form.img.length < 9"></image> -->
						
						<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="9" width="100" height="100" :action="uploadImgUrl" :fileList="form.img" @afterRead='afterRead' @delete="deletePic">
						</u-upload>
					</view>
				</view>
				
				<view class="cont_t"  v-if="item.is_qiang==0">
					<view class="t1" @click="qr_order()">
						<view class="tex">
							申请抢单
						</view>
					</view>
				</view>
			
				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
		</view>
		
		<view v-if="show1" @click="show1=false" class="zhezhao">
		</view>
		
		
		<u-popup :show="showPay" mode="bottom" @close="showPay=false">
			<view class="custom-bot-pay">
				<view class="title">
					支付方式
				</view>
				<view class="pay-item display-flex" @tap="changeType(4)">
					<image :src="'/images/zhi.png' | formatImgUrl" mode="aspectFit" class="icon"></image>
					<text>支付宝支付</text>
					<image :src="'/images/xuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-if="paytype == 4"></image>
					<image :src="'/images/weixuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-else></image>
				</view>
				<view class="pay-item display-flex" @tap="changeType(3)">
					<image :src="'/images/wei.png' | formatImgUrl" mode="aspectFit" class="icon"></image>
					<text>微信支付</text>
					<image :src="'/images/xuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-if="paytype == 3"></image>
					<image :src="'/images/weixuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-else></image>
				</view>
		
				<view class="marginBorder" style="margin-top: 10px;"></view>
				<view class="btn" @tap="showPay=false,goPay()">
					确认支付
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
import * as db from '@/common/db.js'
import {
	  TUIConversationService,
	} from "@tencentcloud/chat-uikit-engine";
	export default { 
		data() {
			return {
				showPay: false,
				paytype: 4,
				show1:false,
				tar_index:0,
				form: {
					img: [],
					cont: []
				},
				item:null,
				id:"",
				userInfo: this.$db.get('userInfo'),
				s:0,
				fileList2: [],
				titleStyle: {
					color: "#fff"
				},
				isClick: true
			}
		},
		
		onLoad(ops) {
			this.id = ops.id
			if(ops.s){
				this.s = ops.s
			}
				console.log(this.id,979797)
		},
		onShow() {
			this.get_info();
		},
		methods: {
			changeType(num){
				this.paytype = num
			},
			goToreport(item) {
			
				uni.navigateTo({
					url: '/pages/find/report?type=3&id=' + item.id + '&newtype=6'
				})
			},
			to_im(item){
			
				// 	console.log(111, item.uid)
				// 	this.$store.commit('createConversationActive', item.uid)
				//    console.log(222, item.uid)
				
				// 	let url = '/pages/tim/room'
				
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				
				if(!this.isClick){
					
					return
				}
				this.isClick = false
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: item.uid,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: item.uid,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: item.uid,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+item.uid);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    }
				});
					
					
					
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
			},
			get_info(){
				var _this = this;
				this.$api.default.request('task/orderListdea', {
					id: _this.id,
				}).then((res) => {
					if (res.code) {
						_this.item = res.data
						if(res.data.is_qiang == 1){
							_this.form.img =   res.data.qiang_arr.img
							_this.form.cont =   res.data.qiang_arr.u_title
							
							console.log(77777777,_this.form.img)
						}
						
					}
				})
			},
			no_order(item){
				let str = "【不感兴趣将不再显示该订单】";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否设置不感兴趣？'+str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_nolike', {id:item.id}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('操作成功');
								
								setTimeout(function() {
										
									uni.navigateBack({//返回上一个页面
									delta: 1
									});
								}, 600);
								
									// _this.page = 1;
									// _this.list = [];
								
						
									return;
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
			},
			tuichu_order(item){
				let str = "是否确认退出抢单";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否'+str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_qx', {id:item.id}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('退出成功');
								
										
											uni.navigateBack({//返回上一个页面
											delta: 1
											});
						
									return;
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
			},
			qr_order(){
				if(this.form.cont == "" || this.form.cont == "  "){
					this.$common.errorToShow('抢单原因必填');
					return;
				}
				this.form.id = this.info.id;
				
				this.form.img = this.fileList2
				
				let str = "确认抢单";
				let _this = this;
				uni.showModal({
					// cancelText: '取消',
					// confirmText: '确定',
					confirmColor: '#45C4B0',
					content: '是否'+str,
					success: function(res) {
						if (res.confirm) {
							
							_this.$api.default.request('task/order_apply', _this.form).then((res) => {
								if (res.code) {
									_this.show1 = false;
									_this.$common.errorToShow('操作成功');
									setTimeout(function() {
											
											uni.navigateTo({
												url: '/task/list/my_orderlist'
											})
									}, 600);
									return;
								
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			apply_order(item){
				this.info = item;
				this.form = {
					img: [],
					cont:"",
					id:""
				}
				this.show1 = true
			},
			getDateStr(mss,type){
					    var days = parseInt(mss / 86400);
						var hours = parseInt((mss-(days*86400))/3600);
						var minutes = parseInt((mss-(days*86400)-(hours*3600))/60);
						var seconds = mss-(days*86400)-(hours*3600) - (minutes * 60)
						
						 if(type == 0){
						 	 return days;
						 }
						 if(type == 1){
							  return hours;
						 }
						 if(type == 2){
						 	  return minutes;
						 }
						 if(type == 3){
							  return seconds;
						 }
					
			},	
			array_level_arr(index){
			
					var array_level = ['不限', '1-10', '11-20','21-30','21-30','31-40','41-50'];
					return array_level[index];
			},
			close() {
				this.show = false
			},
			
			// 删除图片
			deletePic(index) {
				this.form.img.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.img.length
				lists.map((item) => {
					this.form.img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.img[fileListLen]
					this.form.img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			onChooseImg() {
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.img.push(data)
					}
				}, 9)
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			hidePay(e){
				console.log(e)
			},
			goPay(){
				
				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						uni.requestPayment({
						    provider: this.paytype == 4 ? 'alipay' : 'wxpay',
						    orderInfo: res.data.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						    success: function (res) {
						        uni.navigateTo({
						        	url: '/pages/user/orderdetail?id=' + this.orderInfo.id
						        })
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
						

					}
				})
				
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f2f5f2;
	}
	.orderlist {
		padding-top: 100px;
		box-sizing: border-box;
		
		.imgView {
			margin-left: 10px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			// .imgList:nth-child(3n){
			// 	margin-right: 0;
			// }
			.imgList {
				position: relative;
				padding-bottom: 10rpx;
				margin-right: 11rpx;
				.imgClose {
					position: absolute;
					top: -1px;
					right: -1px;
					z-index: 1;
					width: 26rpx;
					height: 26rpx;
					background-color: #45C4B0;
					color: #fff;
					line-height: 26rpx;
					text-align: center;
					border-radius: 100px;
				}
			}
		
			.imgList:not(:first-child) {
				// margin-left: 15rpx;
			}
		}
		
		.zhanwei{
			width: 100%;
			height: 200px;
			float: left;
			background-color: #F2F5F2;
			
		}
		background: url('../static/image/suc.png');
		background-size: 100%;
		width: 100%;
		height: 100vh;
		
		.top_nav{
			width: 92%;
			margin-left: 4%;
			.tp1{
				// padding-top:12px;
				color: #fff;
				width: 100%;
				text-align: center;
				.left{
					position: relative;
					width: 30px;
					height: 2px;
					left:20%;
					top:10px;
					background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%) ;
				}
				.right{
					position: relative;
					left:73%;
					width: 30px;
					top:-10px;
					height: 2px;
					background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%);
				}
			}
			.con{
				width: 100%;
				text-align: center;
				.cons{
					margin: 0 auto;
					width:608rpx;
					margin-top: 20rpx;
					.time_model{
						float: left;
						width:136rpx;
						margin-left: 20rpx;
						height: 146rpx;
						text-align: center;
						background: radial-gradient(50% 50% at 50% 50%, #45C4B0 0%, #45CEB9 100%);
						border-radius:0.5em;
						color: #fff;
						box-sizing: border-box;
						border: 1px solid ;
						// border-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 52%, rgba(255,255,255,0.30) 100%) 1;
						// box-shadow: 0px 0px 10px 0px #03D3B2,inset 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
						&:first-child{
							margin-left: 0px;
						}
						view{
							font-weight: 700;
							width: 100%;
							text-align: center;
							font-size:  70rpx;
							&:last-child{
								font-size: 24rpx;
							}
						}
					}
				}
			}
			.bom{
				margin-top: 15px;
				width: 100%;
				font-size: 12px;
				text-align: center;
				color: #fff;
			}
		}
		.cont{
			width: 92%;
			margin-left: 4%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 6px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;
			.cont_s{
				width: 90%;
				margin-left: 5%;
				.con_top{
					padding-top: 12px;
					width: 100%;
					font-size: 12px;
					float: left;
					font-weight: 400;
					color: #3d3d3d;
					padding-bottom: 8px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
					view{
						float: left;
					}
					.ends{
						float: right;
						color: #45C4B0;
						font-size: 11px;
						font-weight: 500;
						background: rgba(69, 196, 176, 0.15);
						border-radius: 4px;
						padding: 3px 6px;
					}
				}
			}
			.con_nav{
				margin-top: 10px;
				width: 100%;
				float: left;
				.navs{
					.icon{
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top:2px;
						margin-right: 5px;
					}
					.xie{
						background: #7AAAF2 !important;
					}
					.navs_right{
						.tp{
							font-size: 15px;
							width: 90%;
							overflow: hidden;   //隐藏
							white-space: nowrap;  //不换行
							text-overflow: ellipsis; //超出部分省略号
						}
						.bom{
							margin-left: 25px;
							width: 90%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
						}
					}
				}
				.con_bomt{
					font-weight: 400;
					width: 86%;
					padding-left: 7%;
					padding-right: 7%;
					padding-bottom: 15rpx;
					background: rgba(216, 216, 216, 0.3);
					color: #999;
					font-size:10px;
					border-radius: 0.5em;
					padding-top: 5px;
					span{
						color: #45C4B0;
					}
					overflow-wrap:break-word
				}
			}
			.bomt{
				 margin-top: 12px;
				 padding-bottom: 8px;
				 border-bottom:  1px solid rgba(153, 153, 153, 0.1);;
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
				}
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					 font-size: 16px;
					span{
						font-size: 12px
					};
				}
				&:last-child{
					font-size: 12px;
				}
			}
			
			.bomt1{
				 margin-top: 12px;
				 padding-bottom: 8px;
			
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
					font-size: 12px;
				}
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					 font-size: 16px;
					span{
						font-size: 12px
					};
				}
			
			}
			
			.bomt_one{
				width: 100%;
				float: left;
				margin-top: 10px;
				height: 50px;
				view{
					width: 120px;
					height: 32px;
					line-height: 32px;
					border-radius: 0.2em;
					font-size: 13px;
					text-align: center;
					&:first-child{
						float: left;
						margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}
					&:last-child{
						float: right;
						margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}
			
			.man_list{
				width: 100%;
				float: left;
				margin-top: 3px;
				padding-bottom: 10px;
				.left{
					float: left;
					image{
						width: 40px;
						height: 40px;
						border-radius: 184px;
					}
				}
				.pipi_sucess{
					position: relative;
					left: 60rpx;
					top: -70rpx;
					width: 140rpx;
					height: 130rpx;
					transform: rotate(-15deg);
					opacity: 1;
					filter: opacity(0.5);
				}
				.man_cont{
					
					margin-left: 5px;
					float: left;
					.man_top{
						
						.nick{
							float: left;
							font-size: 27rpx;
						}
						// image{
						// 	width: 15px;
						// 	height: 15px;
						// }
						.jibox {
							float: left;
							display: flex;
							align-items: center;
						
							.jipic {
								width: 41px;
								height:19px;
							}
						
							.biepic {
								width: 41px;
								height:19px;
								margin-left: 4px;
							}
						}
					}
					.man_bomt{
						font-size: 12px;
						color: #999;
						font-weight: 500;
						float: left;
					}
				}
				.man_right{
					float: right;
					margin-right: 10px;
					text-align: center;
					width: 58px;
					height: 26px;
					line-height: 26px;
					border-radius: 4px;
					background: #45C4B0;
					font-size: 9px;
					color: #fff;
					margin-top: 10px;
				}
				
				.cnbt{
					width: 100%;
					float: left;
					font-size: 11px;
					margin-top: -40rpx;
					color:#3d3d3d;
					font-weight: 700;
				}
				.bom_img{
					width: 100%;
					image{
						margin-top: 10px;
						float: left;
						width:60px;
						height: 60px;
						background-size: 100%;
						margin-left: 5px;
						border-radius: 0.2em;
						&:first-child{
							margin-left: 0px;
						}
					}
				}
			}
		}
		
		.tarb_new{
			position: fixed;
			bottom: 0px;
			left: 0px;
			height: 50px;
			width: 100%;
			font-size: 12px;
			background: #fff;
			padding-top: 10px;
			font-weight: 700;
			
			.tar_home{
				width: 50%;
				float: left;
				view{
					width: 150px;
					height:35px;
					line-height: 35px;
					background: rgba(216, 216, 216, 0.3);
					color:#000;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}
			
			.tar_order{
				width: 50%;
				float: left;
				view{
					width: 150px;
					height:35px;
					line-height: 35px;
					background: #45C4B0;
					color:#fff ;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}
		}
	
	.zong{
		position: fixed;
		
		text-align: center;
		left: 5%;
		top:15%;
		z-index:102;
	}
	.biaoqian{
		
			border-radius: 0.5em;
			background: #fff;
			width:600rpx;
			margin: 0 auto;
			.top{
				padding-top:70rpx;
				font-size: 28rpx;
				color: #000;
			    text-align: center;
				width: 90%;
				margin-left: 5%;
				image{
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 265rpx;
					top:-35px;
					margin: 0 auto;
					border-radius: 20em;
				}
				view{
					&:first-child{
						font-weight: 700;
						font-size:16px;
						color: #3D3D3D;
					}
					&:last-child{
						margin-top: 6px;
						font-size:12px;
						color: #999;
						
						font-weight: 700;
					}
				}
			}
			
			.tab{
				padding-top: 10rpx;
				font-size: 21rpx;
				font-weight: 700;
				width:90%;
				margin-left: 5%;
				float: left;
				text-align: center;
				textarea{
					width: 88%;
					font-weight: 500;
					background: rgba(216, 216, 216, 0.3);
					padding:10px 10px;
					padding-bottom: 20px;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					color: #999;
					text-align: left;
					height: 100px;
				}
				.c1{
					opacity: 1;
					font-family: Source Han Sans CN;
					font-size: 12px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					color: #999999;
				}
			}
			
			.not_like{
				width:86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);
				.tp{
					padding: 5px 10px;
					font-size: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				}
				image{
					margin-top: 5px;
					width:60px;
					height: 60px;
					float: left;
					border-radius: 0.5em;
					margin-left: 5px;
					&:first-child{
						margin-left: 0px;
					}
				}
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				float: left;
				width: 80%;
				height: 86rpx;
				margin-left: 10%;
				margin-right: 10%;
				text-align: center;
				margin-top: 30rpx;
				color: #fff;
				line-height: 86rpx;
			
			}
			.cont_b{
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 92%;
				height: 86rpx;
				margin-left: 4%;
				color: #45C4B0;
				.t1{
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;
					image{
						width:33rpx;;
						height: 33rpx;
						float: left;
					}
					.tex{
						 float: left;
						 margin-left: 10rpx;
					}
				}
				
				
			}
		}
	
	.cl1{
			height: 60rpx;
			width: 60rpx;;
			position: relative;
			top:110rpx;
	}
	.zhezhao{
		height: 100vh;
		position: fixed;
		top:0rpx;
		right:0px;
		width: 100%;
		z-index:101;
		background: rgba(51, 51, 51, 0.6);
	}
	
	.zong{
		position: fixed;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		// margin-left: 5%;
		top:15%;
		z-index:102;
	}
	.biaoqian{
		
			border-radius: 0.5em;
			background: #fff;
			width:600rpx;
			margin: 0 auto;
			.top{
				padding-top:70rpx;
				font-size: 28rpx;
				color: #000;
			    text-align: center;
				width: 90%;
				margin-left: 5%;
				image{
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 265rpx;
					top:-35px;
					margin: 0 auto;
					border-radius: 20em;
				}
				view{
					&:first-child{
						font-weight: 700;
						font-size:16px;
						color: #3D3D3D;
					}
					&:last-child{
						margin-top: 6px;
						font-size:12px;
						color: #999;
					}
				}
			}
			
			.tab{
				padding-top: 10rpx;
				font-size: 21rpx;
				font-weight: 700;
				width:90%;
				margin-left: 5%;
				float: left;
				text-align: center;
				textarea{
					width: 88%;
					font-weight: 500;
					background: rgba(153, 153, 153, 0.2);
					padding:20px 10px;
					padding-bottom: 20px;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					color: #999;
					text-align: left;
					height: 100px;
				}
				.c1{
					opacity: 1;
					font-family: Source Han Sans CN;
					font-size: 10px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					
					color: #999999;
				}
			}
			
			.not_like{
				width:86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);
				.tp{
					padding: 5px 10px;
					font-size: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				}
				image{
					margin-top: 5px;
					width:60px;
					height: 60px;
					float: left;
					border-radius: 0.5em;
					margin-left: 5px;
					&:first-child{
						margin-left: 0px;
					}
				}
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				float: left;
				width: 80%;
				height: 86rpx;
				margin-left: 10%;
				margin-right: 10%;
				text-align: center;
				margin-top: 30rpx;
				color: #fff;
				line-height: 86rpx;
			
			}
			.cont_b{
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 92%;
				height: 86rpx;
				margin-left: 4%;
				color: #45C4B0;
				.t1{
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;
					image{
						width:33rpx;;
						height: 33rpx;
						float: left;
					}
					.tex{
						 float: left;
						 margin-left: 10rpx;
					}
				}
				
				
			}
		}
	.cl1{
			height: 60rpx;
			width: 60rpx;;
			position: relative;
			top:110rpx;
	}
	.zhezhao{
		height: 100vh;
		position: fixed;
		top:0rpx;
		right:0px;
		width: 100%;
		z-index:101;
		background: rgba(51, 51, 51, 0.6);
	}
	
	}
</style>